import React from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';
import axios from './../../axios/index';
import baseURL from './../../config/baseurl';
import { setCookie } from './../../utils/common';
import jqmlogo from './../../statics/img/jqm-logo.png';
import bg from './../../statics/img/panyasuo.png';
import './index.less';
import { connect } from 'react-redux';
const FormItem = Form.Item;

class Login extends React.Component {
	
	//登录表单
	formRef = React.createRef();
	
    state = {
		codeSrc: "",//图形验证码
		bg: baseURL + "/static/media/system_background.png",
		logo: baseURL + "/static/media/system_logo.png"
	};
	
	componentWillUnmount() {
		this.setState = ()=>false;
	}

	componentDidMount() {
		axios.ajax({
			url: "/User/Login/loginCheck",
			method: "get"
		}).then(res=>{
			if(res.code === 0){
				if(res.result){
					this.props.history.push("/main/whole");
				}
			}
		})
		// const login = document.cookie.includes('login=true');//是否登录
		// if(login){
		// 	this.props.history.push("/main/whole");
		// }
		this.getCode();
	}

	//获取图形验证码
	getCode = ()=> {
		axios.ajax({
			url: "/User/Login/getVerifyCode",
			method: "get"
		}).then(res=>{
			if(res.code === 0){
				this.setState({
					codeSrc: res.result
				})
			}
		})
	}
	
	//登录
	onFinish = values => {
		axios.ajax({
			url: "/User/Login/login",
			method: "post",
			data: values
		}).then(res=>{
			if(res.code === 0){
				axios.ajax({
					url: "/user/Login/getUserInfo",
					method: "get"
				}).then(res=>{
					if(res.code === 0){
						this.props.setUsername(res.user_name);
						document.cookie="login=true";
						this.props.history.push("/main/whole");
					}
				})
			}else{
				setCookie("login", "", -1);
			}
		}).catch(err=>{
			if(err.code === 1101){
				message.error(err.msg);
				this.formRef.current.setFieldsValue({"verify_code":""});
			}else if(err.code === 1103){
				if(err.result.is_disable){
					message.error(err.msg+"，错误次数已达上限");
				}else{
					message.error(err.msg+"，您还可以尝试"+err.result.retry_count+"次");
				}
			}else if(err.code === 2005){
				message.error(err.msg+"，"+err.result.disable_time+"秒后可重新登录");
			}else{
				message.error(err.msg);
			}
			this.getCode();
		})
	}
	
	//清除表单
	onReset = () => {
		this.formRef.current.resetFields();
	};
	
	//logo加载失败显示默认图片
	logoImgError = () => {
		this.setState({
			logo: jqmlogo
		})
	}
	
	//bg背景图加载失败显示默认图片
	bgImgError = () => {
		this.setState({
			bg: bg
		})
	}
	
    render() {
		const { bg, logo } = this.state;
        return (
            <div className="login-page">
				<img src={bg} alt="" className="login-bg" onError={this.bgImgError} />	
				<div className="overlay"></div>
                <div className="login-header">
                    <div className="logo">
                        <img src={logo} alt="" onError={this.logoImgError}  />
                        <h1>JESCLOUD企业网盘</h1>
                    </div>
                </div>
                <div className="login-content-wrap">
                    <div className="login-content">
                        <div className="word">
                        	<h2>JESCLOUD企业网盘</h2>
                        	<p>给您所有数据一个安全的家</p>
                        </div>
                        <div className="login-box">
                            <div className="title">登&#x3000;&#x3000;录</div>
							<Form 
								ref={this.formRef}
								onFinish={this.onFinish}
								className="login-form"
							>
							    <FormItem
									name="username"
									hasFeedback
									validateTrigger="onChange"
									maxLength={16}
									rules={[
										{required: true, message: "请输入账号"},
										{min:5,max:16,message:" "},
										{pattern: /^\w+$/g, message: " "}
									]}
								>
							        <Input placeholder="账号" autoComplete="off" className="wh-input" />
							    </FormItem>
							    <FormItem
									name="pwd"
									hasFeedback
									maxLength={18}
									validateTrigger="onChange"
									rules={[
										{required: true, message: "请输入密码"},
										{min:6,max:18,message:" "},
										{pattern: /^[a-z0-9_]{3,16}$/, message: " "}
									]}
								>
									<Input.Password placeholder="密码" autoComplete="off" className="wh-input" />
							    </FormItem>
								<FormItem noStyle>
									<Row gutter={20}>
										<Col span={12}>
											<FormItem
												name="verify_code"
												hasFeedback
												validateTrigger="onChange"
												rules={[
													{required: true, message: '请输入验证码'},
													{min:4,max:4,message:" "},
													{pattern: /^\w+$/g, message: " "}
												]}
											>
												<Input 
													maxLength={4}
													placeholder="验证码" 
													autoComplete="off"
													className="wh-input"
												/>
											</FormItem>
										</Col>
										<Col span={12}>
											<img 
												src={this.state.codeSrc} 
												alt="验证码" 
												className="code-img"
												onClick={this.getCode}
											/>
										</Col>
									</Row>
								</FormItem>
							    <FormItem>
							        <Button type="primary" htmlType="submit" className="login-form-button">
							            登录
							        </Button>
							    </FormItem>
							</Form>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapDispatch = (dispatch) => {
	return {
		setUsername(username){
			dispatch({
				type: "USERNAME",
				username
			})
		}
	}
}
export default connect(null,mapDispatch)(Login);